<!doctype html>
<html lang="en">
 <head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>Document</title>
	<style type="text/css";>
		*{
			padding:0;
			margin:0;
			background-color:#ccc;
		}
		.box{
			position:relative;
			width:400px;
			height:400px;
			/* border:1px solid red; */
			background:linear-gradient(#000 50%,#fff 50%);
			border-radius:50%;
			margin:100px auto 0 auto;
			animation:xuanzhuan 2s infinite linear;
		}
		.box_l,
		.box_r{
			position:absolute;
			width:200px;
			height:200px;
			border-radius:50%;
		}
		.box_l{
			top:100px;
			left:0px;
			background-color:#000;
		}
		.box_r{
			top:100px;
			left:200px;
			background-color:#fff;
		}
		.box_l div,
		.box_r div{
			position:absolute;
			width:60px;
			height:60px;
			top:70px;
			left:70px;
			border-radius:50%;
		}
		.box_l div{
			background-color:#fff;
		}
		.box_r div{
			background-color:#000;
		}
		@keyframes xuanzhuan{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(-360deg);}
		}
	</style>
 </head>
	<body>
		<div class="box";>
			<div class="box_l";>
				<div></div>
			</div>
			<div class="box_r";>
				<div></div>
			</div>
		</div>
	</body>
</html>
